| angularjs事件通信$on，$emit，$broadcast详解 | 您所在的位置：网站首页 › angular 组件通信 › angularjs事件通信$on，$emit，$broadcast详解 |
angularjs事件通信$on，$emit，$broadcast详解
|
公司项目开发用的是angularjs，关于事件通讯一直用的是EventBus，直到上周写一个小组件懒得引用EventBus时，想到用angularjs自带的事件通信时，结果很尴尬的忘记原生方法单词怎么写了.... 可能现在记录这个真的算很晚了，包括对于显得有些老旧的angularjs，但我们学习的毕竟是思想，而非框架，所以还是独立一篇文章来聊聊angularjs中的事件通信$on，$emit与$broadcast。 一、为什么要用事件通信？ 为什么要用事件通信？肯定要用啊，不用又解决不了问题，只能用事件通信维持生活这样子；在聊这个之前，先简单说说常见的跨作用域通信的几种场景。 问题情景一：父controller传子controller 我们在用angularjs日常开发中，跨作用域传值十分常见；比如父级作用域有一个属性，想跨作用域传递给子级，初学者可能习惯把这个属性绑在父级scope上，通过作用域继承让子级作用域可以直接使用。 我是父作用域 我是子作用域：{{name}} let parentCtrl = function ($scope) { //父作用域定义name属性 $scope.name = "听风是风"; }; let childCtrl = function ($scope) { //子作用域通过继承得到name属性 }; angular.module('myApp', []) .controller("parentCtrl", ['$scope', parentCtrl]) .controller("childCtrl", ['$scope', childCtrl])
这是一种解决方法，但是将所有属性方法绑在scope上并不是很好的做法，这会让父子作用域的属性显得特别混乱。(先不谈controller as vm)； 问题情景二：父作用域传值给子组件 这样的情况也十分常见，父作用域有个值在子组件中也需要使用，友好一点，我们通过bindings来解决这个问题： let parentCtrl = function () { let vm = this; vm.name = '听风是风'; }; angular.module('myApp', []) .controller('parentCtrl', parentCtrl) .component('tingFeng', { template: '我是子组件，我的名字是:{{self.echo}}', controllerAs: 'self', bindings: { echo: ' |
【本文地址】
公司简介
联系我们